<template>
	<el-dialog
		:title="title"
		v-elDragDialog
		:visible.sync="dialogVisible"
		append-to-body
		:show-close="false"
		:close-on-press-escape="false"
		:close-on-click-modal="false"
		custom-class="pagePopIsFc"
		:before-close="handleClose"
	>
		<div class="inner">
			<div class="head">提示</div>
			<div class="body">是否需要复查</div>
			<div class="foot">
				<el-button :loading="sub_load2" @click="clickBtns({ flag: '否' })" class="foot-button-1">否</el-button>
				<el-button :loading="sub_load" @click="clickBtns({ flag: '是' })" class="foot-button-2">是</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import elDragDialog from '@/directives/el-drag-dialog'; // base on element-ui
export default {
	components: {},
	props: {
		title: {
			type: String,
			default: ''
		},
		info: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	name: 'pagePopIsFc',
	data() {
		return {
			dialogVisible: false,
			sub_load: false,
			sub_load2: false,
			userinfo: this.info,
			form: {}
		};
	},
	computed: {},
	watch: {
		info: {
			handler(val) {
				this.userinfo = {
					...val
				};
			},
			immediate: true
		}
	},
	created() {},
	methods: {
		clickBtns({ flag }) {
			if (flag == '否') {
				this.iffc({ is_follow: false });
				return;
			}
			if (flag == '是') {
				this.iffc({ is_follow: true });
				return;
			}
		},
		iffc({ is_follow }) {
			if(is_follow){
				this.sub_load = true;
			}else{
				this.sub_load2 = false;
			}
			this.$api('check/user/update', { user_id: this.$route.query.user_id, is_follow }, 'post').then((res) => {
				this.sub_load = false;
				this.sub_load2 = false;
				if (res.code == 200) {
					this.handleClose();
					this.$emit('activeOver')
				}
			});
		},
		init(data) {
			this.dialogVisible = true;
			if (data) {
				console.log({ ...data }, '----data');
				this.form = { ...data };
			}
			this.$nextTick(() => {});
		},

		onSubmit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
				}
			});
		},
		handleClose() {
			this.$emit('change');
			this.$emit('handleClose');
			this.form = {};
			this.dialogVisible = false;
		}
	},
	directives: { elDragDialog }
};
</script>

<style lang="less">
.pagePopIsFc {
	width: fit-content !important;
	border-radius: 8px;
	overflow: hidden;
	.el-dialog__header {
		// .bor();
		padding: 0;
	}
	.el-dialog__body {
		padding: 0;
		// max-height: 70vh;
		overflow-y: auto;
	}
	.inner {
		display: flex;
		flex-direction: column;
		width: 345px;
		height: 227px;
		background: #ffffff;
		border-radius: 10px;
		.head {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 55px;
			background: #e2e2e2;
			font-weight: bold;
			font-size: 18px;
			color: #333333;
			text-align: center;
			font-style: normal;
		}
		.body {
			flex: 1;
			font-weight: bold;
			font-size: 18px;
			color: #333333;
			font-style: normal;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.foot {
			display: flex;
			justify-content: center;
			padding-bottom: 30px;
			.foot-button-1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 67px;
				height: 30px;
				border-radius: 4px;
				border: 1px solid #999999;

				font-weight: bold;
				font-size: 12px;
				color: #666666;
				font-style: normal;
			}
			.foot-button-2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 67px;
				height: 30px;
				border-radius: 4px;
				border: 1px solid #fc5f10;

				font-weight: bold;
				font-size: 12px;
				color: #fc5f10;
				font-style: normal;
			}
		}
	}
}
</style>
